window.onload = function () {
  /*第一部分顶点着色器接收顶点的纹理坐标，传递给片元着色器*/
  var VSHADER_SOURCE = "" +
    "attribute vec4 a_Position;\n" +
    "attribute vec2 a_TexCoord;\n" +
    "varying vec2 v_TexCoord;\n" +
    "void main(){\n" +
    "   gl_Position = a_Position;\n" +
    "   v_TexCoord = a_TexCoord;\n" +
    "}\n";

  var FSHADER_SOURCE = "" +
    "precision mediump float;\n" +
    "uniform sampler2D u_Sampler;\n" +
    "uniform sampler2D u_Sampler1;\n" +
    "varying vec2 v_TexCoord;\n" +
    "void main(){\n" +
    "   vec4 color = texture2D(u_Sampler,v_TexCoord);\n" +
    "   vec4 color1 = texture2D(u_Sampler1,v_TexCoord);\n" +
    "   gl_FragColor = color * color1;\n" +
    "}\n";

  /*第二部分 main()方法 初始化着色器，设置顶点信息，调用配置纹理方法*/
  function main() {
    var container = document.getElementById("container");
    var canvas = document.createElement("canvas");
    canvas.width = container.clientWidth;
    canvas.height = container.clientHeight;
    container.appendChild(canvas);

    window.onresize = function () {
      canvas.width = container.clientWidth;
      canvas.height = container.clientHeight;
    };
    let gl = canvas.getContext("webgl");
    if (!gl) {
      console.log("你的电脑不支持WebGL！");
      return;
    };
    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
      console.log("初始化着色器失败！");
      return;
    };
    //设置顶点的相关信息
    var n = initVertexBuffers(gl);
    if (n < 0) {
      console.log("无法获取到点的数据");
      return;
    };
    //配置纹理
    if (!initTextures(gl, n)) {
      console.log("无法配置纹理");
      return;
    };
  };
  /*第三部分 initShaders() */
  function initShaders(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE) {
    var vertex_shader_object = gl.createShader(gl.VERTEX_SHADER);
    var fragment_shader_object = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(vertex_shader_object, VERTEX_SHADER_SOURCE);
    gl.shaderSource(fragment_shader_object, FRAGMENT_SHADER_SOURCE);
    gl.compileShader(vertex_shader_object);
    gl.compileShader(fragment_shader_object);
    var program = gl.createProgram();
    gl.attachShader(program, vertex_shader_object);
    gl.attachShader(program, fragment_shader_object);
    gl.linkProgram(program);
    gl.useProgram(program);
    gl.program = program;
    return gl.program;
  };

  /*第四部分 initVertexBuffers() 设置顶点坐标和纹理坐标 调用initTextures()进行下一步处理*/
  function initVertexBuffers(gl) {
    var verticesSizes = new Float32Array([
      //四个顶点的位置和纹理数据
      -0.5, 0.5, 0.0, 1.0,
      -0.5, -0.5, 0.0, 0.0,
      0.5, 0.5, 1.0, 1.0,
      0.5, -0.5, 1.0, 0.0
    ]);
    var n = 4;
    var vertexSizeBuffer = gl.createBuffer();
    if (!vertexSizeBuffer) {
      console.log("无法创建缓冲区");
      return -1;
    };
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexSizeBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, verticesSizes, gl.STATIC_DRAW);
    var a_Position = gl.getAttribLocation(gl.program, "a_Position");
    if (a_Position < 0) {
      console.log("无法获取到存储位置");
      return;
    };
    //获取数组一个值所占的字节数
    var fsize = verticesSizes.BYTES_PER_ELEMENT;
    //将顶点坐标的位置赋值
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, fsize * 4, 0);
    gl.enableVertexAttribArray(a_Position);
    //将顶点的纹理坐标分配给a_TexCoord并开启它
    var a_TexCoord = gl.getAttribLocation(gl.program, "a_TexCoord");
    if (a_TexCoord < 0) {
      console.log("无法获取到存储位置");
      return;
    };
    //将纹理坐标赋值
    gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, fsize * 4, fsize * 2);
    gl.enableVertexAttribArray(a_TexCoord);
    return n;
  };

  /*第五部分 initTextures() 创建纹理对象 并调用纹理绘制方法*/
  function initTextures(gl, n) {
    var texture = gl.createTexture();//创建纹理对象
    var texture1 = gl.createTexture();
    if (!texture || !texture1) {
      console.log("无法创建纹理对象");
      return;
    };
    //获取u_Sampler的存储位置
    var u_Sampler = gl.getUniformLocation(gl.program, "u_Sampler");
    var u_Sampler1 = gl.getUniformLocation(gl.program, "u_Sampler1");
    if (u_Sampler < 0 || u_Sampler1 < 0) {
      console.log("无法获取变量的存储位置");
      return;
    };
    //创建Image对象，并绑定加载完成事件
    var image01 = new Image();
    var image02 = new Image();
    image01.onload = function () {
      loadTexture(gl, n, texture, u_Sampler, image01, 0);
    };
    image02.onload = function () {
      loadTexture(gl, n, texture1, u_Sampler1, image02, 1);
    };
    image01.src = "./img01.jpg";
    image02.src = "./img02.jpg";
    return true;
  };

  /*第六部分 设置纹理相关信息供WebGL使用，并进行绘制*/
  var g_texUnit = false, g_texUnit1 = false;
  function loadTexture(gl, n, texture, u_Sampler, image, texUnit) {
    //对纹理图像进行y轴反转
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
    //开启0号纹理单元
    if (texUnit == 0) {
      gl.activeTexture(gl.TEXTURE0);
      g_texUnit = true;
    } else if (texUnit == 1) {
      gl.activeTexture(gl.TEXTURE1);
      g_texUnit1 = true;
    }
    //向target绑定纹理对象
    gl.bindTexture(gl.TEXTURE_2D, texture);
    //配置纹理参数
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    //配置纹理图像
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image);
    //将0号纹理传递给着色器
    gl.uniform1i(u_Sampler, texUnit);
    //绘制
    if (g_texUnit && g_texUnit1) {
      gl.clearColor(0.0, 0.0, 0.0, 1.0);
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.drawArrays(gl.TRIANGLE_STRIP, 0, n);
    };
  };
  main();
}